<template>
    <div>
        <h1>食谱添加</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td><span style="color: red;">*</span>食谱标题</td>
                    <td>
                        <input type="text" v-model="data.foodTile">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>图片</td>
                    <td>
                        <input type="file" @change="file">
                        <img  :src="'https://localhost:7235'+data.foodImg" alt="" style="width: 100px; height: 100px;">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>类型名称</td>
                    <td>
                        <select v-model="data.typeName">
                            <option value="">请选择</option>
                            <option v-for="m in xia" :value="m.typeName">{{ m.typeName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>状态</td>
                    <td>
                        <input type="radio" name="data.zhuangtai" :value="true" v-model="data.zhuangtai">立即发布
                        <input type="radio" name="data.zhuangtai"  :value="false" v-model="data.zhuangtai">定时发布
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="添加" @click="Add" >
                        <a href="Showfood">返回列表</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from 'axios';

const file=(e:any)=>{
    var f=e.target.files[0];
    var fd=new FormData();
    fd.append("f1",f);
    axios.post("https://localhost:7235/api/TuPian/Up",fd).then(res=>{
        data.value.foodImg=res.data;
    })
}
onMounted(()=>{
    la();
})
const xia=ref([{
    "typeId": 0,
    "typeName": ""
}])
const la=()=>{
    axios.get("https://localhost:7235/api/FoodType/XiaLa").then(res=>{
        xia.value=res.data;
    })
}
const data=ref({
    "foodId": 0,
    "foodTile": "",
    "foodImg": "",
    "typeName": "",
    "zhuangtai": true
})
const Add=()=>{
    if(data.value.foodTile=="")
{
    alert("标题不能为空");
    return;
}
if(data.value.typeName=="")
{
    alert("类型不能为空！");
    return;
}
    axios.post("https://localhost:7235/api/Food/Add",data.value).then(res=>{
        if(res.data>0)
    {
        alert("添加成功！");
        location.href="Showfood"
    }
    else{
        alert("添加失败！");
    }
    })
}
</script>

<style scoped>

</style>    